{% extends 'books/base.html' %}
{% load humanize html_formatters %}
{% block title %} {{ book.title }} {% endblock %}

{% block content %}
<div class="mb-2" style="text-align: left; padding: 20px">
  <div class="row no-gutters">
    <div class="col-md-5">
      <a href="{% url 'book-show' book.id %}" target="_blank">
          <img style="max-width: 100%; object-fit: fill" class="show-preview" src="/media/books/{{ book.id }}/preview.png">
      </a>
    </div>
    <div class="col-md-7">
      <div class="card-body">

        <div class="list-group">

            <div class="d-flex justify-content-between align-items-center list-group-item" style="text-align: right">

                <div class="d-flex">
                    <div>
                        {% include 'books/mark_as_favorite_form.html' with favorite_mark=statistic.favorite %}
                    </div>
                    <div>
                        {% include 'books/mark_as_read_form.html' with read_mark=statistic.read %}
                    </div>
                </div>

                {# Кнопки изменить и удалить #}
                {% if request.user.is_superuser %}
                <div>
                  <a href="{% url 'book-edit' book.id %}"
                     class="badge bg-primary text-decoration-none text-light"
                     style="padding: 6px">
                      Изменить
                  </a>
                  <button type="button" class="badge bg-danger" data-bs-toggle="modal"
                          data-bs-target="#deleteModal" style="padding: 6px; border: none">
                      Удалить
                  </button>
                </div>
                {% endif %}
             </div>

            {# Название книги #}
            <li class="list-group-item active">{{ book.title }}{% if book.year %} ({{ book.year }} г.){% endif %}</li>

            {# Автор #}
            <li class="list-group-item">{% if book.author %}{{ book.author }}{% else %}
                <small class="text-muted">Автор не указан</small>{% endif %}</li>
        </div>
        <br>
        {# Описание #}
        <p class="card-text">{{ book.about | format_links_blank | safe | linebreaks }}</p>
        <br>

        <p class="card-text"><small class="text-muted">Последнее изменение {{ book.published_at | naturaltime }}</small></p>

      </div>
    </div>
  </div>
</div>

{#    Окно удаления    #}
{% if request.user.is_superuser %}
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Внимание!</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Вы уверены, что хотите удалить эту книгу?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <form name="delete_form" action="{% url 'book-delete' book.id %}" method="post">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">Удалить</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endif %}

<div class="b-example-divider"></div>

<div class="container w-75">

<br>

{% include 'books/comments_list.html' with comments=comments %}

<br>

{% include 'books/comments_form.html' with book_id=book.id %}

</div>
{% endblock %}